<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue-2.6.12开发.js"></script>
</head>

<body>
    <!-- 
        data与el的两种写法:
              1.el的两种写法:
                          (1):new Vue时配置el属性
                          (2):先创建Vue实例,然后随后在通过v.$mount('#root')指定el的值
              2.data的两种写法:
                          (1):对象式
                          (2):函数式
                          如何选择:现阶段都可以,到组件后data必须使用函数式 否则报错
              3.一个重要原则:
                          由Vue管理的函数 一定不要写箭头函数 一旦写了箭头函数 this就不在是Vue实例了                  
     -->
     <!-- 备注个人理解:箭头函数没有自己的this,所以Vue不让写箭头函数 因为他需要函数指向自己的实例对象-->
    <div id="root">
        <h1>{{name}}</h1>
    </div>
    <script>
        // el的两种写法
        // const v = new Vue({
        //     // el第一种写法
        //     // el: '#root',
        //     data: {
        //         name: '刘亦菲'
        //     }
        // })
        console.log(v);//v实例 通过原型链 拿到Vue构造函数中的方法
        // v.$mount('#root')//第二种写法

        // data的两种写法
        new Vue({
            el: '#root',
            // data 第一种写法 : 对象式
            // data:{
            //     name:'刘亦菲',
            // }

            // data第二种写法:  函数式
            data() {
                console.log(this);//此处this指向Vue实例对象
                return {
                    name: '刘亦菲'
                }
            }
        })

    </script>
</body>

</html>